<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript" src="../jqtool/jquery.tools.min.js">
        </script>
        <style type="text/css">
            body {
                padding: 50px 80px;
                font-family: "Lucida Grande", "bitstream vera sans", "trebuchet ms", sans-serif, verdana;
            }
            
            /* get rid of those system borders being generated for A tags */
            a:active {
                outline: none;
            }
            
            a:focus {
                -moz-outline-style: none;
            }
        </style>
        <!-- tabs css-->
        <style type="text/css">
            /* root element for tabs  */
            ul.tabs {
                list-style: none;
                margin: 0 !important;
                padding: 0;
                border-bottom: 1px solid #666;
                height: 30px;
            }
            
            /* single tab */
            ul.tabs li {
                float: left;
                text-indent: 0;
                padding: 0;
                margin: 0 !important;
                list-style-image: none !important;
            }
            
            /* link inside the tab. uses a background image */
            ul.tabs a {
                background: url(./img/tabs/blue.png) no-repeat -420px 0;
                font-size: 11px;
                display: block;
                height: 30px;
                line-height: 30px;
                width: 134px;
                text-align: center;
                text-decoration: none;
                color: #333;
                padding: 0px;
                margin: 0px;
                position: relative;
                top: 1px;
            }
            
            ul.tabs a:active {
                outline: none;
            }
            
            /* when mouse enters the tab move the background image */
            ul.tabs a:hover {
                background-position: -420px -31px;
                color: #fff;
            }
            
            /* active tab uses a class name "current". its highlight is also done by moving the background image. */
            ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
                background-position: -420px -62px;
                cursor: default !important;
                color: #000 !important;
            }
            
            /* Different widths for tabs: use a class name: w1, w2, w3 or w2 */
            /* width 1 */
            ul.tabs a.s {
                background-position: -553px 0;
                width: 81px;
            }
            
            ul.tabs a.s:hover {
                background-position: -553px -31px;
            }
            
            ul.tabs a.s.current {
                background-position: -553px -62px;
            }
            
            /* width 2 */
            ul.tabs a.l {
                background-position: -248px -0px;
                width: 174px;
            }
            
            ul.tabs a.l:hover {
                background-position: -248px -31px;
            }
            
            ul.tabs a.l.current {
                background-position: -248px -62px;
            }
            
            /* width 3 */
            ul.tabs a.xl {
                background-position: 0 -0px;
                width: 248px;
            }
            
            ul.tabs a.xl:hover {
                background-position: 0 -31px;
            }
            
            ul.tabs a.xl.current {
                background-position: 0 -62px;
            }
            
            /* initially all panes are hidden */ .panes .pane {
                display: none;
            }
        </style>
        <!--tabs-panes.css-->
        <style type="text/css">
            
            /* tab pane styling */ .panes div {
                display: none;
                padding: 15px 10px;
                border: 1px solid #999;
                border-top: 0;
                height: 100px;
                font-size: 14px;
                background-color: #fff;
            }
        </style>
        <style type="text/css">
            div.panes div {
                background: #fff url(./img/gradient/h300.png) repeat-x 0 5px;
                -background: #fff;
                height: 172px;
            }
            
            div.panes label {
                margin-bottom: 15px;
                display: block;
            }
            
            label.error {
                color: red;
            }
        </style>
    </head>
    <body>
        <div id="wizard_tabs">
            <!-- tabs -->
            <ul class="tabs">
                <li>
                    <a href="#" class="l">Personal info</a>
                </li>
                <li>
                    <a href="#" class="l">Shopping basket</a>
                </li>
                <li>
                    <a href="#" class="l">Review order</a>
                </li>
            </ul>
            <!-- panes -->
            <div class="panes">
                <div>
                    <label>
                        Username 
                        <br/>
                        <input name="username"/>
                    </label>
                    <label>
                        Email 
                        <br/>
                        <input name="email"/>
                    </label>
                    <label>
                        <input id="terms" type="checkbox" />I accept <a href="#">these</a>
                        terms and conditions
                    </label>
                    <p>
                        <button class="next">
                            Next &raquo;
                        </button>
                    </p>
                </div>
                <div>
                    <h2>An imaginary basket is here...</h2>
                    <p>
                        <button class="prev">
                            &laquo; Prev
                        </button>
                        <button class="next">
                            Next &raquo;
                        </button>
                    </p>
                </div>
                <div>
                    <h2>An imaginary order is here...</h2>
                    <p>
                        <button class="prev">
                            &laquo; Prev
                        </button>
                    </p>
                </div>
            </div>
        </div>
        <!-- activate tabs with JavaScript -->
        <script type="text/javascript">
            $(function(){
            
                // get container for the wizard and initialize its exposing
                var wizard = $("#wizard_tabs").expose({
                    color: '#789',
                    lazy: true
                });
                
                // enable exposing on the wizard
                wizard.click(function(){
                    $(this).expose().load();
                });
                
                // enable tabs that are contained within the wizard
                $("ul.tabs", wizard).tabs("div.panes > div", function(event, index){
                
                    /* now we are inside the onBeforeClick event */
                    
                    // ensure that the "terms" checkbox is checked.
                    var terms = $("#terms");
                    if (index > 0 && !terms.get(0).checked) {
                        terms.parent().addClass("error");
                        
                        // when false is returned, the user cannot advance to the next tab
                        return false;
                    }
                    
                    // everything is ok. remove possible red highlight from the terms
                    terms.parent().removeClass("error");
                });
                
                // get handle to the tabs API
                var api = $("ul.tabs", wizard).data("tabs");
                
                // "next tab" button
                $("button.next", wizard).click(function(){
                    api.next();
                });
                
                // "previous tab" button
                $("button.prev", wizard).click(function(){
                    api.prev();
                });
            });
        </script>
    </body>
</html>
